<template>
  <Table
    ref="tableRef"
    :url="URL_GETACOUNTALARMPAGE"
    :columns="data.columns"
    :query="data.query"
    :toolbar="data.toolbar"
  ></Table>
</template>

<script lang="ts" setup name="historicalOrderList">
import Table from '@/components/table/index.vue';
import { USER_TYPE } from '@/utils/dictionaries';
import { queryDicByParent } from '@/service/apis/api';
import { exportFile } from '@/utils/utils';
import {
  URL_GETACOUNTALARMPAGE,
  EXPORT_ACOUNTALARMPAGE,
} from '@/service/apis/alarm';
import moment from 'moment';

// import { number } from 'echarts/core';

const router = useRouter();

const tableRef = ref();

const data = reactive({
  pickDate: null as any,
  columns: [
    {
      prop: 'accountNumber',
      label: '用户账号',
    },
    {
      prop: 'orgName',
      label: '归属企业',
    },
    {
      prop: 'alarmTime',
      label: '告警时间',
    },
    {
      prop: 'isNotify',
      label: '是否短信通知',
      template: (row: any, index: number) => {
        return row.isNotify ? '是' : '否';
      },
    },
    {
      prop: 'totalBalance',
      label: '账户余额（元）',
    },
  ],
  toolbar: [
    {
      label: '导出',
      permission: 'accountAlarmList.export',
      icon: 'icon-export',
      type: 'primary',
      plain: true,
      handle: (row: any) => {
        const startData = tableRef?.value.getForm().alarmStartTime;
        const startData1 = tableRef?.value.getForm().alarmEndTime;
        const day = moment(startData1).diff(moment(startData), 'day');
        if ((startData || day > 0) && day < 63) {
          exportFile(
            EXPORT_ACOUNTALARMPAGE,
            '账户告警',
            tableRef.value?.getForm()
          );
        } else {
          ElMessageBox.alert(
            '单次导出最多支持导出周期为2个月的数据，请按时间筛选导出对象后再导出。',
            '提示',
            {
              confirmButtonText: '确认',
              type: 'warning',
            }
          );
        }
      },
      // handle: (row: any) => {
      //   exportFile(
      //     EXPORT_ACOUNTALARMPAGE,
      //     '账户告警',
      //     tableRef.value?.getForm()
      //   );
      // },
    },
  ],
  query: [
    {
      label: '用户账号',
      prop: 'accountNumber',
      comName: 'input',
      props: {
        placeholder: '请输入用户账号',
      },
    },
    {
      label: '归属企业',
      prop: 'orgName',
      comName: 'input',
      props: {
        placeholder: '请输入归属企业',
      },
    },
    {
      label: '告警时间',
      prop: 'startData',
      comName: 'date',
      keys: ['alarmStartTime', 'alarmEndTime'],
      props: {
        type: 'daterange',
        calendarChange: (pick: any) => {
          let hasSelectDate = pick !== null && pick.length > 0;
          data.pickDate = hasSelectDate ? pick[0] : null;
        },
        change: (time: any) => {
          if (!time) {
            data.pickDate = null;
          }
        },
        disabledDate: (time: any): any => {
          if (data.pickDate) {
            const checkTime = data.pickDate.getTime();
            const startTime = checkTime - 62 * 86400 * 1000; // 前面限制62天
            const endTime = checkTime + 62 * 86400 * 1000; // 后面限制62天
            return time.getTime() > endTime || time.getTime() < startTime;
          } else {
            return false;
          }
        },
      },
    },
  ],
});
</script>